<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社交资讯文章列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            padding-bottom: 60px;
        }
        
        /* 导航栏样式 */
        .top-nav {
            background-color: white;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #2563eb;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        /* 资讯卡片基础样式 */
        .news-card {
            background-color: white;
            border-radius: 10px;
            margin: 0 10px 12px;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        
        /* 资讯头部 */
        .news-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .source-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
        
        .source-info {
            flex: 1;
        }
        
        .source-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 1px;
        }
        
        .publish-time {
            font-size: 12px;
            color: #999;
        }
        
        /* 资讯内容 */
        .news-content {
            padding: 12px 16px;
        }
        
        .news-title {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 8px;
            color: #1a1a1a;
        }
        
        .news-summary {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        /* 图片容器样式 */
        .news-images {
            margin-bottom: 12px;
            border-radius: 6px;
            overflow: hidden;
        }
        
        /* 无图样式 - 增加内边距 */
        .no-image .news-content {
            padding-bottom: 16px;
        }
        
        /* 单图样式 */
        .single-image {
            width: 100%;
        }
        
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图样式 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
        }
        
        .multi-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 双图样式 */
        .two-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3px;
        }
        
        .two-images img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            display: block;
        }
        
        /* 资讯底部 */
        .news-footer {
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f0f0f0;
            font-size: 12px;
            color: #999;
        }
        
        .news-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .news-tag {
            background-color: #f5f5f5;
            color: #666;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            text-decoration: none;
        }
        
        .action-buttons {
            display: flex;
            gap: 16px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            color: #999;
            text-decoration: none;
        }
        
        .action-btn i {
            margin-right: 4px;
            font-size: 14px;
        }
        
        .action-btn:hover {
            color: #2563eb;
        }
        
        /* 分类标题 */
        .category-title {
            padding: 16px 16px 8px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav d-flex justify-content-between align-items-center">
        <h5 class="mb-0">资讯动态</h5>
        <div class="d-flex">
            <button class="btn btn-link p-1 text-dark">
                <i class="fas fa-search"></i>
            </button>
            <button class="btn btn-link p-1 text-dark ms-2">
                <i class="fas fa-cog"></i>
            </button>
        </div>
    </div>
    
    <!-- 资讯列表 -->
    <div class="news-list">
        <!-- 1. 无图资讯 -->
        <div class="category-title">无图资讯</div>
        <article class="news-card no-image">
            <div class="news-header">
                <img src="https://picsum.photos/id/237/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">科技日报</div>
                    <div class="publish-time">2小时前 · 3.2万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">我国成功发射新一代通信技术试验卫星，多项技术实现突破</h3>
                <div class="news-summary">
                    今日凌晨，我国在西昌卫星发射中心使用长征三号乙运载火箭，成功将新一代通信技术试验卫星发射升空。此次发射的卫星采用了多项新技术，将为我国通信网络建设提供重要支撑...
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">科技</a>
                    <a href="#" class="news-tag">航天</a>
                    <a href="#" class="news-tag">国内新闻</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 128</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>568</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 2. 单图资讯 -->
        <div class="category-title">单图资讯</div>
        <article class="news-card">
            <div class="news-header">
                <img src="https://picsum.photos/id/24/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">环球财经</div>
                    <div class="publish-time">5小时前 · 7.8万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">全球数字经济论坛在京开幕，聚焦数字技术与实体经济融合</h3>
                <div class="news-summary">
                    全球数字经济论坛今日在北京开幕，来自30多个国家和地区的代表参会。本次论坛以"数字赋能未来"为主题，探讨数字技术如何更好地与实体经济融合，推动全球经济高质量发展...
                </div>
                
                <div class="news-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/180/800/400" alt="论坛现场">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">经济</a>
                    <a href="#" class="news-tag">数字经济</a>
                    <a href="#" class="news-tag">论坛</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 342</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>1256</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 3. 双图资讯 -->
        <div class="category-title">双图资讯</div>
        <article class="news-card">
            <div class="news-header">
                <img src="https://picsum.photos/id/91/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">城市旅游报</div>
                    <div class="publish-time">昨天 14:30 · 5.1万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">国内首条跨省旅游高铁专线开通，串联多地著名景点</h3>
                <div class="news-summary">
                    国内首条跨省旅游高铁专线今日正式开通运营，该专线连接了5个省份的12个著名旅游城市，全程运行时间比原来缩短近一半，将极大方便游客出行...
                </div>
                
                <div class="news-images">
                    <div class="two-images">
                        <img src="https://picsum.photos/id/1039/400/300" alt="高铁列车">
                        <img src="https://picsum.photos/id/1061/400/300" alt="沿线风景">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">旅游</a>
                    <a href="#" class="news-tag">交通</a>
                    <a href="#" class="news-tag">高铁</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 217</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>892</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 4. 三图资讯 -->
        <div class="category-title">三图资讯</div>
        <article class="news-card">
            <div class="news-header">
                <img src="https://picsum.photos/id/65/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">文化周刊</div>
                    <div class="publish-time">3天前 · 9.4万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">国家级非遗展览在博物馆开展，展示传统工艺的现代传承</h3>
                <div class="news-summary">
                    为期一个月的国家级非物质文化遗产展览今日在国家博物馆开展，展览汇集了来自全国各地的150多件非遗作品，既有传统技艺的经典之作，也有融入现代设计的创新作品...
                </div>
                
                <div class="news-images">
                    <div class="multi-images">
                        <img src="https://picsum.photos/id/1082/300/300" alt="非遗展品1">
                        <img src="https://picsum.photos/id/175/300/300" alt="非遗展品2">
                        <img src="https://picsum.photos/id/306/300/300" alt="非遗展品3">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">文化</a>
                    <a href="#" class="news-tag">非遗</a>
                    <a href="#" class="news-tag">展览</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 456</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>2153</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
        
        <!-- 5. 长文摘要资讯 -->
        <div class="category-title">长文摘要</div>
        <article class="news-card">
            <div class="news-header">
                <img src="https://picsum.photos/id/177/100/100" alt="资讯来源" class="source-avatar">
                <div class="source-info">
                    <div class="source-name">深度报道</div>
                    <div class="publish-time">1周前 · 12.7万阅读</div>
                </div>
                <button class="btn btn-link p-1 text-dark">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="news-content">
                <h3 class="news-title">专访：数字时代如何保护个人信息安全？专家解读最新法规</h3>
                <div class="news-summary">
                    随着数字经济的快速发展，个人信息保护问题日益受到关注。本报记者专访了信息安全领域专家张明教授，就最新实施的个人信息保护法进行解读，分析在数字时代如何平衡信息利用与安全保护...
                    <span style="color: #2563eb;">[阅读全文]</span>
                </div>
                
                <div class="news-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/160/800/400" alt="信息安全">
                    </div>
                </div>
                
                <div class="news-tags">
                    <a href="#" class="news-tag">信息安全</a>
                    <a href="#" class="news-tag">专访</a>
                    <a href="#" class="news-tag">法律</a>
                </div>
            </div>
            
            <div class="news-footer">
                <div>评论 876</div>
                <div class="action-buttons">
                    <a href="#" class="action-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>3421</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>评论</span>
                    </a>
                    <a href="#" class="action-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </article>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-newspaper"></i>
            <span>资讯</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 资讯互动功能
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞按钮交互
            document.querySelectorAll('.action-btn .fa-thumbs-up').forEach(icon => {
                const btn = icon.closest('.action-btn');
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const countEl = this.querySelector('span');
                    
                    if (icon.classList.contains('far')) {
                        // 未点赞状态
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.style.color = '#2563eb';
                        countEl.textContent = parseInt(countEl.textContent) + 1;
                    } else {
                        // 已点赞状态
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.style.color = '';
                        countEl.textContent = parseInt(countEl.textContent) - 1;
                    }
                });
            });
            
            // 评论和分享按钮交互
            document.querySelectorAll('.action-btn:not(:first-child)').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    // 这里可以添加评论或分享的逻辑
                    this.style.color = '#2563eb';
                    setTimeout(() => {
                        this.style.color = '';
                    }, 300);
                });
            });
        });
    </script>
</body>
</html>

